<template>
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" :show-close="false" :close-on-click-modal="false"
        title="请输入密码" width="30%" :before-close="handleClose">
        <div class="flex aic">
            <p>请输入提取码：</p><el-input v-model="password" placeholder="Please input" style="width: 80%;" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
                <el-button type="primary" @click="sure">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-table v-else :data="tableData" style="width: 100%">
        <el-table-column prop="Title" label="名称">
            <template v-slot="title">
                <div class="flex aic">
                    <img v-if="title.row.isfolder != 1" class="titleImg mr-20" :src="title.row.path" alt="">
                    <i v-else class="iconfont icon-wenjianleixing-suolvetu-wenjianjia mr-20"></i>
                    <span>{{ title.row.file.file_or_folder_name }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="file.size" label="大小" />
        <el-table-column prop="expiration_time" label="到期时间" />
        <el-table-column label="操作" >
            <template v-slot="operate">
                <div>
                    <i @click="aa(operate.row)" class="iconfont icon-xiazai f18 cp"></i>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as $axios from '../../api/index'
import { useRoute } from "vue-router";
import { useDemoStore } from '../../pinia/index'
const route = useRoute();
const store = useDemoStore()

const dialogVisible = ref(false)
const password = ref('') //密码输入框

// 分享内容数据
const tableData = ref([])

// 获取分享内容
const getShare = () => {
    const data = {
        token: store.token,
        share_id: route.query.share_id
    }
    $axios.$fileShare_info(data).then(res => {
        if (res.data.is_pwd == 'YES') {
            dialogVisible.value = true
        } else {
            res.data.file.size = (res.data.file.size / 1024 / 1000).toFixed(2) + 'M'
            tableData.value.push(res.data)
        }
        console.log(res)
    })
}

// 密码获取分享内容
const sure = () => {
    const data = {
        token: store.token,
        share_id: route.query.share_id,
        pwd: password.value
    }
    $axios.$fileShare_pwd(data).then(res => {
        if(res.Status == 0){
            res.data.file.size = (res.data.file.size / 1024 / 1000).toFixed(2) + 'M'
            tableData.value.push(res.data)
            dialogVisible.value = false
        }
        console.log(res)
    })
}

const aa = (value)=>{
    const id = value.file_id
    const name = value.file.file_or_folder_name
    const data = {
        token:store.token,
        file:id
    }
    $axios.$fileDown(data).then(res => {
        console.log(res)
      var base64 = res.data.base.toString(); // imgSrc 就是base64哈
      var byteCharacters = atob(
        base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
      );
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray], {
        type: undefined,
      });
      var aLink = document.createElement("a");
      aLink.download = name; //这里写保存时的图片名称
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    })
}

onMounted(() => {
    getShare()
})
</script>

<style lang="less" scoped>
.titleImg {
    width: 100px;
}

.icon-xiazai{
    font-size: 23px;
}
</style>